<template>
  <view class="safeAreaBottom XTabBar" :style="`${props.isGray && 'filter: grayscale(100%)'}`">
    <view class="tabBarWrap">
      <view
        class="tabItem"
        v-for="(item, i) in tabBarState.tabBarList"
        :key="i"
        @click="tabItemClick(item)"
      >
        <view class="custom" v-if="item?.['custom']">
          <image class="icon" :src="`/${item.iconPath}`" mode="scaleToFill" />
          <view class="text">{{ item.text }}</view>
          <view class="miniWechat" v-if="programState.platform === 'H5'" :style="{ opacity: 0 }">
            <wx-open-launch-weapp
              id="launchWechat"
              class="launchWechat"
              path="pages/map/map"
              appId="wx301b4a0c1c2700fc"
            >
              <!-- <component is="script" type="text/wxtag-template" :style="{ opacity: 0 }">
                <view
                  class="btn"
                  :style="{
                    opacity: 0,
                    width: '108rpx',
                    height: '108rpx',
                    display: 'inline-block',
                    boxSizing: 'border-box',
                  }"
                ></view>
              </component> -->
            </wx-open-launch-weapp>
          </view>
        </view>
        <view :class="{ item: true, active: item.pagePath === tabBarState.currentTab }" v-else>
          <image class="icon normal" :src="`/${item.iconPath}`" mode="scaleToFill" />
          <image class="icon highlight" :src="`/${item.selectedIconPath}`" mode="scaleToFill" />
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onShow } from "@dcloudio/uni-app";
import { onMounted, reactive, watch, computed } from "vue";
import { fileUrl } from "@/util/util";
import { navigate } from "@/util/navigate";
import store from "@/store/store";
const { tabBarState, programState } = store;

const props = defineProps({
  isGray: { type: Boolean, required: true, default: false },
});
onShow(() => {
  const routes = getCurrentPages();
  const path = routes[routes.length - 1].route || "";
  tabBarState.currentTab = path;
});
function tabItemClick(item: typeof tabBarState.tabBarList[number]) {
  if (item.custom) return;
  if (item.pagePath === tabBarState.currentTab) return;
  navigate({ url: `/${item.pagePath}`, navMethod: "switchTab" });
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
